<template>
  <div class="products">
    <section class="hero">
      <div class="hero-content">
        <h1>{{ $t('products.title') }}</h1>
        <p>探索我们的LED照明产品系列</p>
      </div>
    </section>

    <section class="product-categories">
      <div class="container">
        <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
          <el-tab-pane label="室内照明" name="indoor">
            <div class="product-grid">
              <div v-for="product in indoorProducts" :key="product.id" class="product-card">
                <img :src="product.image" :alt="product.name">
                <div class="product-info">
                  <h3>{{ product.name }}</h3>
                  <p>{{ product.description }}</p>
                  <div class="product-meta">
                    <span class="price">¥{{ product.price }}</span>
                    <el-button type="primary" @click="viewProduct(product)">
                      {{ $t('products.viewDetails') }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="户外照明" name="outdoor">
            <div class="product-grid">
              <div v-for="product in outdoorProducts" :key="product.id" class="product-card">
                <img :src="product.image" :alt="product.name">
                <div class="product-info">
                  <h3>{{ product.name }}</h3>
                  <p>{{ product.description }}</p>
                  <div class="product-meta">
                    <span class="price">¥{{ product.price }}</span>
                    <el-button type="primary" @click="viewProduct(product)">
                      {{ $t('products.viewDetails') }}
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Product } from '@/types'

const activeCategory = ref('indoor')

const indoorProducts = ref<Product[]>([
  {
    id: 1,
    name: '智能LED面板灯',
    description: '超薄设计，智能调光，适合办公场所',
    image: '/images/product1.jpg',
    category: '室内照明',
    price: 299
  },
  {
    id: 2,
    name: '智能吸顶灯',
    description: '简约现代，支持语音控制，适合家居',
    image: '/images/product3.jpg',
    category: '室内照明',
    price: 399
  },
  {
    id: 3,
    name: 'LED筒灯',
    description: '高显色性，无频闪，适合商业场所',
    image: '/images/product4.jpg',
    category: '室内照明',
    price: 199
  }
])

const outdoorProducts = ref<Product[]>([
  {
    id: 4,
    name: '户外景观灯',
    description: '防水防尘，节能环保，适合户外照明',
    image: '/images/product2.jpg',
    category: '户外照明',
    price: 599
  },
  {
    id: 5,
    name: '太阳能路灯',
    description: '太阳能供电，智能控制，适合道路照明',
    image: '/images/product5.jpg',
    category: '户外照明',
    price: 899
  },
  {
    id: 6,
    name: 'LED投光灯',
    description: '高亮度，远距离投射，适合建筑照明',
    image: '/images/product6.jpg',
    category: '户外照明',
    price: 699
  }
])

const handleCategoryChange = (tab: any): void => {
  console.log('切换到分类:', tab.props.name)
}

const viewProduct = (product: Product): void => {
  console.log('查看产品:', product)
}
</script>

<style scoped lang="scss">
.products {
  .hero {
    height: 40vh;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
                url('/images/products-bg.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;

    .hero-content {
      h1 {
        font-size: 3rem;
        margin-bottom: 1rem;
      }

      p {
        font-size: 1.5rem;
      }
    }
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }

  .product-categories {
    padding: 4rem 0;
    background-color: var(--bg-color);

    .product-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2rem;
      margin-top: 2rem;

      .product-card {
        background: var(--bg-color);
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
        }

        img {
          width: 100%;
          height: 200px;
          object-fit: cover;
        }

        .product-info {
          padding: 1.5rem;

          h3 {
            margin-bottom: 0.5rem;
          }

          p {
            color: var(--text-color-secondary);
            margin-bottom: 1rem;
          }

          .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price {
              font-size: 1.25rem;
              font-weight: bold;
              color: var(--primary-color);
            }
          }
        }
      }
    }
  }
}
</style> 